<template>
    <HeaderTitle title="高级感,安排！" style="width: 4rem"></HeaderTitle>
    <div class="el-theme-box">
        <n-carousel effect="card" :show-dots="false" draggable :autoplay="true">
            <n-carousel-item v-for="(item, index) in imgBgList" :key="index" :style="{ width: '10rem' }">
                <img class="img-el" :src="item.src" alt="no image">
                <div class="name-color">
                    <div class="el-name el-name1" :style="'background:' + item.color1">{{ item.name1 }}</div>
                    <div class="el-name el-name2" :style="'background:' + item.color2">{{ item.name2 }}</div>
                </div>
                <div class="but-el" @click="toggleElementTheme(item.themeName)">
                    <button v-if="app.themeName === item.themeName" class="but">使用中</button>
                    <button v-else class="but">使用</button>
                </div>
            </n-carousel-item>
        </n-carousel>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store"

const {app} = useStore();

const imgBgList = [
    {
        themeName: "cen-fui",
        name1: "爱马仕",
        name2: "浅灰",
        src: "/src/assets/images/theme/1-1.jpg",
        color1: "#FF7711",
        color2: "#C2C1C2",
    },
    {
        themeName: "lv-qin",
        name1: "千岁绿",
        name2: "竹青色",
        src: "/src/assets/images/theme/1-2.jpg",
        color1: "#3C5540",
        color2: "#94A988",
    },
    {
        themeName: "qin-mian",
        name1: "雪青色",
        name2: "十样绵",
        src: "/src/assets/images/theme/1-3.jpg",
        color1: "#ABA3CC",
        color2: "#FAC7C6",
    },
    {
        themeName: "qin-zhi",
        name1: "群青",
        name2: "栀子",
        src: "/src/assets/images/theme/1-4.jpg",
        color1: "#3056A9",
        color2: "#FDBC3A",
    },
    {
        themeName: "tuo-fui",
        name1: "深骆色",
        name2: "深灰红",
        src: "/src/assets/images/theme/6-1.jpg",
        color1: "#BE824D",
        color2: "#634F50",
    },
    {
        themeName: "cen-lan",
        name1: "赤橙",
        name2: "克莱因",
        src: "/src/assets/images/theme/6-2.jpg",
        color1: "#FF8000",
        color2: "#012EA5",
    },
    {
        themeName: "huang-long",
        name1: "明黄色",
        name2: "水龙吟",
        src: "/src/assets/images/theme/6-3.jpg",
        color1: "#FFDD33",
        color2: "#81A029",
    },
    {
        themeName: "qianlv-qin",
        name1: "浅绿色",
        name2: "深青色",
        src: "/src/assets/images/theme/6-4.jpg",
        color1: "#95FE95",
        color2: "#007A81",
    },
];

/**
 * 切换主题色
 * @param name
 */
const toggleElementThemeColor = (name: string) => {
    if (app.themeName === name) {
        app.themeName = "default";
        document.documentElement.setAttribute('theme-el', "default");
    } else {
        app.themeName = name;
        document.documentElement.setAttribute('theme-el', name);
    }
}

/**
 * 更改主题,提示bg设置
 */
const toggleElementTheme = (name: string) => {
    window.$dialog?.success({
        title: '提示',
        content: '是否使用次色作为背景？',
        positiveText: 'Yes',
        negativeText: 'No',
        onPositiveClick: () => {
            app.isThemeBg = true;
            toggleElementThemeColor(name);
            window.$message?.success('大爷您瞧瞧,合您胃口不?');
        },
        onNegativeClick: () => {
            app.isThemeBg = false;
            toggleElementThemeColor(name);
            window.$message?.success('图片背景才是王道,让单色调去厕所哭吧!');
        }
    })
};
</script>

<style scoped lang="scss">
.el-theme-box {
  position: relative;
  width: 90%;
  margin: 0 auto;
  height: 5rem;

  .img-el {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: 0.2rem;
  }

  .name-color {
    position: absolute;
    top: 0;
    left: 0.2rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 1.5rem;

    &:hover {
      .el-name2 {
        transform: translateY(-0.05rem);
      }
    }

    .el-name {
      height: 0.6rem;
      color: var(--text-color);
      font-size: 0.3rem;
      line-height: 0.6rem;
      font-weight: bold;
      text-align: center;
      box-shadow: 0 0.03rem 0.04rem 0.02rem rgba(0, 0, 0, .2);
      border-radius: 0 0 0.25rem 0.25rem;
    }

    .el-name1 {
      width: 100%;
      z-index: 1;
    }

    .el-name2 {
      z-index: 0;
      width: 1.2rem;
      margin: 0 auto;
      transform: translateY(-0.55rem);
      transition: 0.4s;
    }
  }

  .but-el {
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
  }
}
</style>